/* *{touch-action: auto;} */

body {
  margin: 0;
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
  font-kerning: normal; 


}

body>* {
  box-sizing: border-box;
}

.topnav {
  margin-top: 10px;
  display: flex;
  visibility: hidden;

}

/* //////////////////////////////////////////////////////////////////////////////// */

.topnav a:nth-child(1) {
  background-image: url(../img/aarde_75_75_blur.png);
}

/* .topnav a:nth-child(2) {
  background-image: url(../img/aarde_75_75_magenta_blur.png);
} */

.topnav a:nth-child(2) {
  background-image: url(../img/lichtobject_75_75.png);
}

.topnav a:nth-child(3) {
  background-image: url(../img/lichtobject2_75_75_blur_dark.png);
}
.topnav a:nth-child(4) {
  background-image: url(../img/lichtobject3_75_75_dark.png);
}
.topnav a:nth-child(5) {
  background-image: url(../img/lichtobject5_75_75_dark.png);
}
.topnav a:nth-child(6) {
  background-image: url(../img/lichtobject7_75_75_dark.png);
}
.topnav a:nth-child(7) {
  /* background-image: url(../img/lichtobject7_75_75_dark.png); */
  background-image: url(../img/cosmosbutton_opacity_0_8.png);
  /* opacity: 0.7; */
}

.topnav a:hover:nth-child(1) {
  background-image: url(../img/aarde_75_75.png);
}

/* .topnav a:hover:nth-child(2) {
  background-image: url(../img/aarde_75_75_groen.png);
} */

.topnav a:hover:nth-child(2) {
  background-image: url(../img/lichtobject_75_75_screen.png);
}

.topnav a:hover:nth-child(3) {
  background-image: url(../img/lichtobject2_75_75.png);
}
.topnav a:hover:nth-child(4) {
  background-image: url(../img/lichtobject3_75_75.png);
}
.topnav a:hover:nth-child(5) {
  background-image: url(../img/lichtobject5_75_75_light.png);
}
.topnav a:hover:nth-child(6) {
  background-image: url(../img/lichtobject7_75_75_light.png);
}
.topnav a:nth-child(7) {
  /* background-image: url(../img/lichtobject7_75_75_dark.png); */
  background-image: url(../img/cosmosbutton.png);
  /* opacity: 0.7; */
}

.topnav a.active:nth-child(1) {
  background-image: url(../img/aarde_75_75.png);
  /* font-size: 25px; */
}

/* .topnav a.active:nth-child(2) {
  background-image: url(../img/aarde_75_75_groen.png);
  
} */

.topnav a.active:nth-child(2) {
  background-image: url(../img/lichtobject_75_75_screen.png);
  
}

.topnav a.active:nth-child(3) {
  background-image: url(../img/lichtobject2_75_75.png);
  /* font-size: 25px; */
}
.topnav a.active:nth-child(4) {
  background-image: url(../img/lichtobject3_75_75.png);
  /* font-size: 25px; */
}
.topnav a.active:nth-child(5) {
  background-image: url(../img/lichtobject5_75_75_light.png);
  /* font-size: 25px; */
}
.topnav a.active:nth-child(6) {
  background-image: url(../img/lichtobject7_75_75_light.png);
  /* font-size: 25px; */
}
.topnav a:nth-child(7) {
  /* background-image: url(../img/lichtobject7_75_75_dark.png); */
  background-image: url(../img/cosmosbutton.png);
  /* opacity: 0.7; */
}
/* //////////////////////////////////////////////////////////////////////////////// */

.topnav a {
  /* float: left; */
  /* display: block; */
  width: 75px;
  height: 75px;
  /* line-height: 75px; */
  line-height: 0px;
 
  text-align: center;
  /* display: inline-block; */
  vertical-align: top;
  /* vertical-align: middle; */


  /* color: #f2f2f2; */
  color:rgb(208, 96, 252);
  /* border: 3px solid green; */
  padding: 0px 0px;
  text-decoration: none;
  /* font-size: 12px; */
  /* background-image: url(img/aarde_75_75_blur.png); */
  border-radius: 100%;
  /* display: flex;
      justify-content: center;
      justify-items: center; */
  /* font-family: "Sono"; */
  font-family: "Recursive", monospace;
  font-weight: 400;
  /* font-size: 1.0vw; */
  /* word-spacing: -0.4em; */

  
  /* word-spacing: -0.0em; */
  /* letter-spacing: 0.10em; */
  /* letter-spacing: -0.1em; */
  /* font-size: 1.0vw; */
  font-size:16px !important;
  word-spacing: 0.1em !important;
  letter-spacing: -0.20em !important;



  text-shadow: 1px 1px #000000;

}


.topnav a:hover {
  background-color: rgb(251, 122, 255);
  color: rgb(31, 255, 225);

  /* color: rgb(255, 151, 31); */
  /* background-image: url(img/aarde_75_75.png); */
  border-radius: 100%;
  /* font-size: 12px; */
  font-weight: 400;
  /* font-size: 1.0vw; */
  word-spacing: -0.4em;
  letter-spacing: 0.10em;
  /* background-color: rgba(255, 244, 86, 0.322); */
  z-index:111;


}

.topnav a.active {
  /* background-color: #4CAF50; */
  color: rgb(31, 255, 225);


  /* color: rgb(255, 151, 31); */
  /* background-image: url(img/aarde_75_75.png); */
  border-radius: 100%;
  /* font-size: 10px; */
  margin-top: 10px;
  /* font-size: 11px; */
  z-index:111;
}

/* .box { 
      background-color: blueviolet;
        top: 0px;
      left: 0px; 
      opacity: 1.0;
      width: 299px;
      height: 299px;
      position: absolute;
      border-radius:50%;
       background-image: url(./earth_299_299.png); 
       display: flex;
       justify-content:center;
       align-items: center;
       color: white;
       font-size: 70px;
    } */

* {
  padding: 0;
  margin: 0
}

html {
  overflow: hidden !important;
}

body {
  overflow: hidden !important;
  background-color: rgb(0, 0, 0);
  display: flex;
  /* align-items: center;
        justify-content: center; */
}

/* canvas {
 overflow:hidden !important; 
} */

/* body {
	background: #313131;
}  */
img,
canvas {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  /* background-color: brown; */
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.myTopnav {


  /* position: relative; */
  /* top: 0px;  */
  z-index: 1;
  position: absolute;
  /* width: 500px; */
  /* width: 700px; */
  height: 110px;
  top: 50%;
  left: 50%;
  /* margin-left: 10px; */
  /* background: rgba(204, 204, 204, 0.432); */

  /* display: flex; */
  /* justify-content: center; */
  /* justify-items: center; */
  /* font-size: 10px; */


}

#atelierview {
  z-index: -1;
  position: relative;
  /* top: -200px; */
}



/* ----------------------- media resolutions ------------------------ */

/* @media screen and (max-width:799px) { */
  @media only screen and (max-width: 799px) and (orientation : portrait) {
  /* .somecontainer {        flex-direction: column; */

    .topnav a {
      width: 58px;
      height: 58px;
      /* line-height: 58px; */
      line-height: 0px;
      /* color: #f2f2f2; */
      /* color: #ffceff; */
      /* border: 2px solid rgba(107, 247, 240, 0.068); */
      /* font-size: 10px; */
      font-weight: 400;
      /* font-size: 1.0vw; */
      /* word-spacing: 0.1em; */
      /* letter-spacing: -0.25em; */
      /* word-spacing: -0.4em;
      letter-spacing: -0.10em; */
      background-size: 52px;
      background-repeat: no-repeat; 
      /* background-position: cover;  */
      background-position: center;  
      /* text-shadow: 1px 1px #444444; */

      -webkit-filter: drop-shadow(0px 0px 3px rgba(0, 132, 255, 0.8));
      filter: drop-shadow(0px 0px 3px rgba(0,132,255,0.8));


      /* font-size:15px !important; */
      font-size: 90% !important;
      word-spacing: 90% !important;
      letter-spacing: 90% !important;
      /* word-spacing: 0.1em !important;
      letter-spacing: -0.30em !important; */


    }

    .topnav a:hover {
      /* background-color: #ddd; */
      /* color: rgb(246, 255, 167); */
      /* background-image: url(img/aarde_75_75.png); */
      /* font-size:10px; */
      /* text-shadow: 1px 1px #444444; */
      -webkit-filter: drop-shadow(0px 0px 3px rgba(21, 255, 0, 0.8));
      filter: drop-shadow(0px 0px 3px rgba(0,255,0,.8));

  background-color: rgba(255, 244, 86, 0.178);
  /* border: 2px solid rgba(30, 248, 22, 0.384); */
}
  .topnav a:active {
    /* background-color: #ddd; */
    /* color: rgb(246, 255, 167); */
    /* background-image: url(img/aarde_75_75.png); */
    /* font-size:10px; */
    /* text-shadow: 1px 1px #444444; */
background-color: rgba(255, 244, 86, 0.178);
-webkit-filter: drop-shadow(0px 0px 3px rgba(21, 255, 0, 0.8));
filter: drop-shadow(0px 0px 3px rgba(0,255,0,0.8));

/* border: 2px solid rgba(30, 248, 22, 0.384); */
  
    }

    .myTopnav {


      /* position: relative; */
      /* top: 0px;  */
      z-index: 1;
      position: absolute;
      width: 500px;
      height: 110px;
      top: 16.0%;
      left: 50%;
      /* margin-left: 10px; */
      /* background: rgba(204, 204, 204, 0.432); */
    
      /* display: flex; */
      /* justify-content: center; */
      /* justify-items: center; */
      /* font-size: 8px; */
    
    
    }
  }

  @media only screen and (max-width: 799px) and (orientation : landscape) {
    .myTopnav {


      /* position: relative; */
      /* top: 0px;  */
      z-index: 1;
      position: absolute;
      width: 500px;
      height: 110px;
      top: 50%;
      left: 50%;
      /* margin-left: 10px; */
      /* background: rgba(204, 204, 204, 0.432); */
    
      /* display: flex; */
      /* justify-content: center; */
      /* justify-items: center; */
      /* font-size: 8px; */
      font-size: 90% !important;
      word-spacing: 90% !important;

    
    }

    .topnav {
      margin-top: 10px;
    
    }

    /* .topnav a {
      width: 58px;
      height: 58px;}
      .topnav a:hover {
        width: 58px;
        height: 58px;}
        .topnav a:active {
          width: 58px;
          height: 58px;} */
          


  }



  @media screen and (min-width:800px) and (max-width:1279px) {}

  @media screen and (min-width:1280px) and (max-width:1439px) {}

  @media screen and (min-width:1440px) and (max-width:1919px) {}

  @media screen and (min-width:1920px) and (max-width:2559px) {}

  @media screen and (min-width:2560px) {}






















  /* @media screen and (max-width:799px) { */
    @media only screen and (max-width: 799px) and (orientation : landscape) {

    body {overflow-x: hidden;}
  
    .topnav a {
      width: 58px;
      height: 58px;
      line-height: 0px;
      /* color: #f2f2f2; */
      /* color: #ffceff; */
      /* border: 2px solid rgba(107, 247, 240, 0.068); */
      /* font-size: 10px; */
      font-weight: 400;
      /* font-size: 10px !important; */
      /* word-spacing: -0.4em; */
      /* letter-spacing: -0.25em; */
      background-size: 52px;
      background-repeat: no-repeat;
      /* background-position: cover;  */
      background-position: center;
      /* text-shadow: 1px 1px #444444; */
      -webkit-filter: drop-shadow(0px 0px 3px rgba(0, 132, 255, 0.8));
      filter: drop-shadow(0px 0px 3px rgba(0, 132, 255, 0.8));
  
      font-size: 90% !important;
      word-spacing: 90% !important;
      letter-spacing: 90% !important;
      /* word-spacing: 0.1em !important;
      letter-spacing: -0.3em !important; */
  
      
    }
  
    .topnav a:hover {
      /* background-color: #ddd; */
      /* color: rgb(246, 255, 167); */
      /* background-image: url(img/aarde_75_75.png); */
      /* font-size:10px; */
      /* text-shadow: 1px 1px #444444; */
      -webkit-filter: drop-shadow(0px 0px 3px rgba(21, 255, 0, 0.8));
      filter: drop-shadow(0px 0px 3px rgba(0, 255, 0, .8));
      background-color: rgba(255, 244, 86, 0.178);
      /* border: 2px solid rgba(30, 248, 22, 0.384); */
      z-index:10000 !important;
    }
  
    .topnav a:active {
      /* background-color: #ddd; */
      /* color: rgb(246, 255, 167); */
      /* background-image: url(img/aarde_75_75.png); */
      /* font-size:10px; */
      /* text-shadow: 1px 1px #444444; */
      background-color: rgba(255, 244, 86, 0.178);
      -webkit-filter: drop-shadow(0px 0px 3px rgba(21, 255, 0, 0.8));
      filter: drop-shadow(0px 0px 3px rgba(0, 255, 0, 0.8));
      /* border: 2px solid rgba(30, 248, 22, 0.384); */
      z-index:10000 !important;
    }
  
    .myTopnav {
      /* position: relative; */
      /* top: 0px;  */
      z-index: 100;
      /* position: absolute; */
      width: 500px;
      height: 110px;
      /* top: 50%; */
      /* left: 50%; */
      /* margin-left: 10px; */
      /* background: rgba(204, 204, 204, 0.432); */
      /* display: flex; */
      /* justify-content: center; */
      /* justify-items: center; */
      /* font-size: 8px; */
      /* bottom: 100%;
      right:100%; */
    }
  }